<template>
  <view class="map-container">
    <!-- 地图组件 -->
    <map
      :id="mapId"
      class="map"
      :style="mapStyle"
      :latitude="center.latitude"
      :longitude="center.longitude"
      :scale="scale"
      :markers="markers"
      :show-location="showLocation"
      @markertap="onMarkerTap"
      @tap="onMapTap"
      @callouttap="onCalloutTap"
    >
    </map>

    <!-- 地图上的UI控件 -->
    <view class="map-controls">
      <!-- 附近门店标签 -->
      <view class="nearby-shop-label" @click="navigateToNearby">附近门店</view>
    </view>

    <!-- 底部信息卡片 -->
    <view v-if="selectedShop.name" class="info-card">
      <view class="card-main">
        <view class="card-left">
          <view class="card-header">
            <text class="shop-name">{{ selectedShop.name }}</text>
            <view class="rating">
              <text class="stars">{{ "⭐".repeat(selectedShop.rating) }}</text>
              <text class="score">{{ selectedShop.score }}分</text>
            </view>
          </view>
          <view class="card-content">
            <text class="business-hours">
              {{ selectedShop.businessHours }}
            </text>
            <text class="address">{{ selectedShop.address }}</text>
            <text class="distance">距离您 {{ selectedShop.distance }}m</text>
          </view>
        </view>
        <view class="card-right">
          <image
            class="shop-image"
            :src="selectedShop.image"
            mode="aspectFill"
          ></image>
        </view>
      </view>
      <view class="card-footer">
        <button class="contact-btn" @click="contactShop">联系门店</button>
        <button class="book-btn" @click="navigateToDetail">立即预定</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import request from "../../../utils/request.js";

// 地图相关数据
const mapId = ref("map");
const scale = ref(16);
const showLocation = ref(true);

// 地图中心点（北京天安门坐标作为默认位置）
const center = reactive({
  latitude: 39.908823,
  longitude: 116.39747,
});

// 标记点数组
const markers = ref([]);

// 当前选中的店铺信息
const selectedShop = ref({});

// 存储API返回的店铺原始数据（用于点击切换）
const shopsData = ref([]);

// 地图样式
const mapStyle = ref("width: 100%; height: 100vh;");
const navigateToDetail = () => {
  console.log("点击了"+selectedShop.value);
  uni.navigateTo({
    url: "/pages/maintenance/detail/detail?merchantId=" + selectedShop.value.id,
  });
};

// 获取当前位置
const getCurrentLocation = () => {
  uni.getLocation({
    type: "gcj02",
    success: (res) => {
      console.log("当前位置：", res);
      center.latitude = res.latitude;
      center.longitude = res.longitude;

      // 添加当前位置标记
      markers.value.push({
        id: Date.now(),
        latitude: res.latitude,
        longitude: res.longitude,
        title: "我的位置",
        iconPath: "/static/my-location.jpg",
        width: 25,
        height: 25,
      });
      const merchants = ref([]);

      // 位置获取成功后，请求附近门店数据
      const urlWithParams = `/pyh/merchant/listDtoDistance?latitude=${center.latitude}&longitude=${center.longitude}`;
      console.log("请求URL：", urlWithParams);

      request({
        url: urlWithParams,
        method: "GET",
      })
        .then((res) => {
          console.log("请求附近门店数据成功");
          console.log(res);

          // 存储API返回的原始店铺数据
          merchants.value = res.rows;
          if (res.rows && Array.isArray(res.rows)) {
            shopsData.value = res.rows; // 存储原始数据
            console.log("存储的店铺数据:", shopsData.value);

            // 将API数据转换为地图标记格式
            const shopMarkers = res.rows
              .map((shop, index) => {
                // 验证坐标的有效性
                const latitude = parseFloat(shop.latitude);
                const longitude = parseFloat(shop.longitude);

                // 检查坐标是否在有效范围内
                if (
                  isNaN(latitude) ||
                  isNaN(longitude) ||
                  latitude < -90 ||
                  latitude > 90 ||
                  longitude < -180 ||
                  longitude > 180
                ) {
                  console.warn(`店铺 ${shop.name} 的坐标无效:`, {
                    latitude: shop.latitude,
                    longitude: shop.longitude,
                    parsedLatitude: latitude,
                    parsedLongitude: longitude,
                  });
                  return null; // 跳过无效坐标
                }

                // 生成星级评分
                const stars = "⭐".repeat(shop.rate || 5);

                // 获取图片路径，如果不存在则使用默认标记点
                let iconPath = ""; // 使用系统默认标记点，不指定图片路径
                if (shop.merchantImgs && shop.merchantImgs.img) {
                  iconPath = shop.merchantImgs.img.split(',')[0];
                }
                // 如果没有图片路径，则使用默认标记点（iconPath保持空字符串）

                console.log(`店铺 ${shop.name} 的图标路径:`, iconPath);
                console.log(`店铺 ${shop.name} 的有效坐标:`, {
                  latitude,
                  longitude,
                });

                return {
                  id: shop.id,
                  latitude: latitude,
                  longitude: longitude,
                  title: shop.name,
                  iconPath: iconPath,
                  width: 40, // 增大图标尺寸
                  height: 40, // 增大图标尺寸
                  callout: {
                    content: `${shop.name}\n评分: ${shop.rate || 5}分\n距离: ${
                      shop.distance
                        ? (shop.distance * 1000).toFixed(0) + "m"
                        : "未知"
                    }`,
                    color: "#ffffff",
                    fontSize: 12,
                    borderRadius: 5,
                    bgColor: "#333333",
                    padding: 5,
                    display: "BYCLICK",
                  },
                };
              })
              .filter((marker) => marker !== null); // 过滤掉无效坐标的标记

            console.log("处理后的有效门店标记:", shopMarkers);

            // 清空原有标记并添加新的门店标记（保留我的位置标记）
            const myLocationMarker = markers.value.find(
              (marker) => marker.title === "我的位置"
            );
            if (myLocationMarker) {
              markers.value = [myLocationMarker, ...shopMarkers];
            } else {
              // 如果没有我的位置标记，只添加门店标记
              markers.value = [...shopMarkers];
              console.warn("未找到我的位置标记，只有门店标记");
            }
            console.log("更新前的标记:", markers);
            console.log("门店标记数据:", shopMarkers);
            console.log("更新后的标记数量:", markers.value.length);
          } else {
            console.warn("API返回数据中没有rows字段或rows不是数组:", res);
          }
        })
        .catch((err) => {
          console.error("请求附近门店数据失败");
          console.log(err);
        });
    },
    fail: (err) => {
      console.error("获取位置失败：", err);
      uni.showToast({
        title: "获取位置失败",
        icon: "none",
      });
    },
  });
};

// 标记点击事件
const onMarkerTap = (e) => {
  console.log("标记点击：", e);
  console.log("点击的标记ID:", e.markerId);

  // 根据标记ID在markers数组中找到对应的标记
  const clickedMarker = markers.value.find(
    (marker) => marker.id === e.markerId
  );
  console.log("点击的标记信息:", clickedMarker);

  if (!clickedMarker) {
    console.warn("未找到对应的标记");
    return;
  }
  // 如果点击的是"我的位置"标记，不切换店铺信息
  if (clickedMarker.title === "我的位置") {
    console.log("点击了我的位置，不切换店铺信息");
    uni.showToast({
      title: "这是我的位置",
      icon: "none",
    });
    return;
  }

  // 查找对应的店铺原始数据
  const shopData = shopsData.value.find((shop) => shop.id === clickedMarker.id);
  console.log("找到的店铺数据:", shopData);

  if (shopData) {
    // 处理营业时间格式
    let businessHours = "营业时间未知";
    if (shopData.startTime && shopData.endTime) {
      // 提取时间部分（去掉日期和时区信息）
      const startTime =
        shopData.startTime.split("T")[1]?.split(".")[0]?.substring(0, 5) ||
        "00:00";
      const endTime =
        shopData.endTime.split("T")[1]?.split(".")[0]?.substring(0, 5) ||
        "23:59";
      console.log(`营业时间: ${startTime}-${endTime}`);
      businessHours = `周一至周日 ${startTime}-${endTime}`;
    }

    // 更新选中店铺信息（根据实际API数据结构）
    selectedShop.value = {
      id: shopData.id,
      name: shopData.name || "未知店铺",
      rating: shopData.rate || 5,
      score: shopData.rate || 5,
      businessHours: businessHours,
      address: shopData.address || "地址未知",
      distance: shopData.distance
        ? (shopData.distance * 1000).toFixed(0)
        : "未知",
      image: shopData.merchantImgs?.img || "/static/logo.png",
      phone: shopData.merchantVerification?.mobile || "暂无电话",
    };

    console.log("更新后的选中店铺信息:", selectedShop.value);

    // 显示成功提示
    uni.showToast({
      title: `已选择：${selectedShop.value.name}`,
      icon: "none",
      duration: 1500,
    });
  } else {
    console.warn("未找到店铺对应的原始数据");
    uni.showToast({
      title: "店铺信息加载中...",
      icon: "none",
    });
  }
};

// 地图点击事件
const onMapTap = (e) => {
  console.log("地图点击：", e);
};

// 气泡点击事件
const onCalloutTap = (e) => {
  console.log("气泡点击：", e);
};

// 跳转到附近店铺页面
const navigateToNearby = () => {
  // 查找我的位置标记
  const myLocationMarker = markers.value.find(
    (marker) => marker.title === "我的位置"
  );

  if (myLocationMarker) {
    const { latitude, longitude } = myLocationMarker;
    // 构建带位置参数的URL
    const url = `../nearby/nearby?latitude=${latitude}&longitude=${longitude}`;
    console.log("传递位置参数到附近页面:", { latitude, longitude, url });

    uni.navigateTo({
      url: url,
    });
  } else {
    console.warn("未找到我的位置，无法传递坐标参数");
    uni.showToast({
      title: "请先获取位置信息",
      icon: "none",
    });
  }
};

// 页面生命周期
onMounted(() => {
  console.log("地图页面加载");
  // 页面加载时获取位置
  getCurrentLocation();
});

// 联系门店处理函数
const contactShop = () => {
  if (selectedShop.value && selectedShop.value.phone) {
    uni.showModal({
      title: '联系门店',
      content: `电话号码：${selectedShop.value.phone}`,
      confirmText: '拨打',
      cancelText: '取消',
      success: (res) => {
        if (res.confirm) {
          // 调用系统电话功能
          uni.makePhoneCall({
            phoneNumber: selectedShop.value.phone,
            fail: (err) => {
              console.error('拨打电话失败', err);
              uni.showToast({
                title: '拨打电话失败',
                icon: 'none'
              });
            }
          });
        }
      }
    });
  } else {
    uni.showToast({
      title: '暂未获取到店铺电话',
      icon: 'none'
    });
  }
};

// 暴露给外部调用的方法
defineExpose({
  getCurrentLocation,
});
</script>

<style scoped>
.map-container {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.map {
  width: 100%;
  height: 100%;
}

.map-controls {
  position: absolute;
  top: 20rpx;
  right: 20rpx;
  z-index: 100;
}

/* 附近门店标签样式 */
.nearby-shop-label {
  background-color: #333333;
  color: #ffffff;
  padding: 15rpx 20rpx;
  border-radius: 25rpx 0 0 25rpx;
  font-size: 28rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.3);
}

.control-btn {
  background-color: #ffffff;
  color: #333333;
  border: none;
  border-radius: 50%;
  width: 80rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28rpx;
  box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.2);
}

.control-btn:active {
  background-color: #f5f5f5;
}

/* 底部信息卡片样式 */
.info-card {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #ffffff;
  border-radius: 30rpx 30rpx 0 0;
  padding: 30rpx;
  box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.1);
  z-index: 100;
}

.card-main {
  display: flex;
  margin-bottom: 20rpx;
}

.card-left {
  flex: 1;
  margin-right: 20rpx;
}

.card-right {
  width: 200rpx;
  height: 160rpx;
}

.shop-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10rpx;
}

.card-header {
  margin-bottom: 20rpx;
}

.shop-name {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
  display: block;
  margin-bottom: 10rpx;
}

.rating {
  display: flex;
  align-items: center;
}

.stars {
  font-size: 24rpx;
  margin-right: 10rpx;
}

.score {
  font-size: 24rpx;
  color: #666666;
}

.card-content {
  font-size: 28rpx;
  color: #666666;
  line-height: 1.6;
  margin-bottom: 30rpx;
}

.business-hours,
.address,
.distance {
  display: block;
  margin-bottom: 10rpx;
}

.card-footer {
  display: flex;
  gap: 20rpx;
}

.contact-btn {
  flex: 1;
  background-color: #f5f5f5;
  color: #333333;
  border: none;
  border-radius: 20rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
}

.book-btn {
  flex: 1;
  background-color: #ff4d4f;
  color: #ffffff;
  border: none;
  border-radius: 20rpx;
  padding: 20rpx 0;
  font-size: 32rpx;
  font-weight: bold;
}
</style>
